/**
 * Package: buildClock
 *
 * Description:
 * this file is the javascript to generate the watch with or without text
 *
 * Files:
 *  - watch_js/watch.js
 *
 * License:
 * Copyright (c) 2012, matchbox France http://www.matchbox.fr
 * This program is dual licensed under the GNU General Public License
 * and Simplified BSD license.
 */
var checked;
var offseter;
function removeElement(id) {
	var element = document.getElementById(id);
	element.parentNode.removeChild(element);
}

function buildClock(params) {
	document.getElementById("rolexClockWim-container").style.width = params.clockWidth+"px";
	document.getElementById("rolexClockWim-container").style.height = params.clockHeight+"px";
	document.getElementById("rolexClockWim-backToRolex").style.width = params.clockWidth+"px";
	document.getElementById("rolexClockWim-backToRolex").style.height = params.clockHeight+"px";
		document.getElementById("trackUrl").href = params.trackingurl ;
		if (params.trackUrlNewArea == false) {
			document.getElementById('trackUrl2').style.display = "none";
		}
	if (Modernizr.retina == true) {
		global_watch_p["xscale"] = params.retinaXscale;
		global_watch_p["yscale"] = params.retinaYscale;
	} else {
		document.getElementById("rolexClockWim-container").style.background = "transparent url('" + "" + params.bgFileName + "') 00% 50% no-repeat"
	}
	if (Modernizr.canvas == true) {
		document.getElementById("trackUrl").href = params.trackingurl ;
		document.getElementById("trackUrl2").href = params.trackingurl ;
		if (params.showText == false) {
			document.getElementById("rolexClockWim-container").removeChild(document.getElementById("timezone"));
			document.getElementById("rolexClockWim-container").removeChild(document.getElementById("yourtime"))
		} else {
			var yourtime = document.getElementById("yourTime");
			var timeTimezon = document.getElementById("timezone");
			var timeTimezon1 = document.getElementById("timezone1");
			var timeTimezon2 = document.getElementById("timezone2");
			var language= params.LANG;
			var language = language.toLowerCase();
			var now_date = new Date();


			var year = now_date.getFullYear();
			var month = now_date.getMonth()+1;
			var day = now_date.getDate();
			if (month<10) {
				month = "0"+month;
			}
			if (day<10) {
				day = "0"+day;
			}
			var names =  [];
			var timezones = [];
			var timezone_dst = [];
			var todayfull = Number(year+""+month+""+day);
			String.prototype.trim = function() {
				return this.replace(/\s/g, "");
			}
			var index = null;
			for (var i = 0; i < cityArray.length; i++) {
				if (todayfull >=cityArray[i].startDate && todayfull <=cityArray[i].endDate) {
					index = i;
					function changeBg(bg) {
						if (bg == 'full') {
							document.getElementById("rolexClockWim-container").style.background = "#fff url(''" + "bg.png') no-repeat";
							global_watch_p["xcenter"] = 61;
							global_watch_p["ycenter"] = 160;
							timeTimezon.style.display="block";
							timeTimezon1.style.display="block";
							timeTimezon2.style.display="block";
							yourtime.style.display="block";
							yourtime.style.top = "164px";
							trackUrl.style.left = params.trackUrlL;
							trackUrl.style.height = params.trackUrlH;
							trackUrl.style.width = params.trackUrlW;
							if (Modernizr.retina == true) {
								document.getElementById("rolexClockWim-container").style.background = "transparent url('" + "bg.png') no-repeat";
								document.getElementById("rolexClockWim-container").style.backgroundSize = "auto 100%";
							}
						} else {
							document.getElementById("rolexClockWim-container").style.background = "transparent url('" + "bg.png') no-repeat";
							global_watch_p["xcenter"] = 61;
							global_watch_p["ycenter"] = 160;
							yourtime.style.display="none";
							timeTimezon.style.display="none";
							timeTimezon1.style.display="none";
							timeTimezon2.style.display="none";
							trackUrl.style.left = params.trackUrlL;
							trackUrl.style.height = params.trackUrlH;
							trackUrl.style.width = params.trackUrlW;
							if (Modernizr.retina == true) {
								document.getElementById("rolexClockWim-container").style.background = "transparent url('" + "bg.png') no-repeat";
								document.getElementById("rolexClockWim-container").style.backgroundSize = "auto 100%";

							}
						}

					}
					if (language == '') {
						names .push(cityArray[index].city['En']);
					} else {
						names .push(cityArray[index].city[language]);
					}
					timezones .push(cityArray[index].timezone);
					timezone_dst .push(cityArray[index].dst);
					if (names.length == 1) {
						changeBg('full');
						params.theCityText = (names[0]).replace(/\+\b/gi,' ');
						params.customOffset = timezones[0],
						params.theCity = (names[0].toLowerCase()).trim();
						params.theCityText1 = "";
						params.customOffset1 = "",
						params.theCity1 = "";
						params.theCityText2 = "";
						params.customOffset2 = "",
						params.theCity2 = "";
						params.customDST = timezone_dst[0];
						params.customDST1= '';
						params.customDST2 = '';
						timeTimezon.style.display="block";
						timeTimezon1.style.display="none";
						timeTimezon2.style.display="none";
						timeTimezon.className = "topcenter";
					} else if (names.length == 2) {
						changeBg('full');
						params.theCityText = names[0];
						params.customOffset = timezones[0],
						params.theCity = (names[0].toLowerCase()).trim();
						params.theCityText1 = names[1];
						params.customOffset1 = timezones[1],
						params.theCity1 = (names[1].toLowerCase()).trim();
						params.theCityText2 = "";
						params.customOffset2 = "",
						params.theCity2 = "";
						params.customDST = timezone_dst[0];
						params.customDST1= timezone_dst[1];
						params.customDST2 = '';
						timeTimezon.className = "topleft";
						timeTimezon1.className = "bottomleft";
						timeTimezon2.style.display="none";
					} else  if (names.length >= 3) {
						changeBg('full');
						params.theCityText = names[0];
						params.customOffset = timezones[0],
						params.theCity = (names[0].toLowerCase()).trim();
						params.theCityText1 = names[1];
						params.customOffset1 = timezones[1],
						params.theCity1 = (names[1].toLowerCase()).trim();
						params.theCityText2 = names[2];
						params.customOffset2 = timezones[2],
						params.theCity2 = (names[2].toLowerCase()).trim();
						params.customDST = timezone_dst[0];
						params.customDST1= timezone_dst[1];
						params.customDST2 = timezone_dst[2];
						timeTimezon.className = "topleft";
						timeTimezon1.className = "bottomleft";
						timeTimezon2.className = "righttop";
						yourtime.style.top = "164px";
					}   else  if (names.length == 0 || names.length == '') {
						changeBg();
					}
				}


			}


			var Arrow = document.getElementById("arrow");
			var Arrow0 = document.getElementById("arrow0");
			var Arrow1 = document.getElementById("arrow1");
			var Arrow2 = document.getElementById("arrow2");
			var thenewOffset,
			       customOffset,
			       elem;

			yourtime.onclick = function() {
				timeTimezon.style.color = params.yellowcolor;
				timeTimezon1.style.color = params.greencolor;
				timeTimezon2.style.color = params.greencolor;
				yourtime.style.color = params.greencolor;
				Arrow.style.color = params.greencolor;
				Arrow.style.display = "block";
				Arrow0.style.display = "none";
				Arrow1.style.display = "none";
				Arrow2.style.display = "none";
				showCurrentTime();
				if (parent.document.getElementById('local')) parent.CT_ToggleTimeZones(parent.document.getElementById('local'))
			};
			timeTimezon.onclick = function() {
				timeTimezon.style.color = params.greencolor;
				timeTimezon1.style.color = params.greencolor;
				timeTimezon2.style.color = params.greencolor;
				yourtime.style.color = params.yellowcolor;
				Arrow.style.display = "none";
				Arrow0.style.color = params.greencolor;
				Arrow0.style.display = "block";
				Arrow1.style.display = "none";
				Arrow2.style.display = "none";
				showTimeIn(params.theCity,params.customOffset,"",params.customDST);
				if (parent.document.getElementById('race')) parent.CT_ToggleTimeZones(parent.document.getElementById('race'))
			};
			timeTimezon1.onclick = function() {
				timeTimezon.style.color = params.yellowcolor;
				timeTimezon1.style.color = params.greencolor;
				timeTimezon2.style.color = params.yellowcolor;
				yourtime.style.color = params.yellowcolor;
				Arrow.style.display = "none";
				Arrow0.style.display = "none";
				Arrow1.style.color = params.greencolor;
				Arrow1.style.display = "block";
				Arrow2.style.display = "none";
				showTimeIn(params.theCity1,params.customOffset1,"1",params.customDST1)
			};
			timeTimezon2.onclick = function() {
				timeTimezon.style.color = params.yellowcolor;
				timeTimezon1.style.color = params.yellowcolor;
				timeTimezon2.style.color = params.greencolor;
				yourtime.style.color = params.yellowcolor;
				Arrow.style.display = "none";
				Arrow0.style.display = "none";
				Arrow1.style.display = "none";
				Arrow2.style.color = params.greencolor;
				Arrow2.style.display = "block";
				showTimeIn(params.theCity2,params.customOffset2,"2",params.customDST2)
			};
			if (params.showTime == true) {
				document.getElementById("timezone").removeChild(document.getElementById("textContainer1"));
				document.getElementById("yourtime").removeChild(document.getElementById("textContainer"))
			} else {
				if (params.upperCase == true) {
					document.getElementById("cityText").style.textTransform = "uppercase";
					document.getElementById("cityText1").style.textTransform = "uppercase";
					document.getElementById("cityText2").innerHTML = params.theCityText2;
					document.getElementById("cityText2").style.textTransform = "uppercase";
					document.getElementById("localtext").innerHTML = params.theLocalText;
					document.getElementById("localtext").style.textTransform = "uppercase";
				} else {
					document.getElementById("cityText").innerHTML = params.theCityText;
					document.getElementById("cityText1").innerHTML = params.theCityText1;
					document.getElementById("cityText2").innerHTML = params.theCityText2;
					document.getElementById("localtext").innerHTML = params.theLocalText;
				}
			}



			function updateShownTimeInHTMLComponentOvertime() {
				updateShownTimeInHTMLComponent();
				// timeoutID = window.setTimeout("updateShownTimeInHTMLComponentOvertime()", 100)
				requestAnimFrame(updateShownTimeInHTMLComponentOvertime());
			}

			function showTimeIn(a,offset,elem,DST_TiMEZONE) {

				var b = new Date;
				var tempOffset = b.getTimezoneOffset();
				var tempOffset1 = b.getTimezoneOffset();
				var tempOffset2 = b.getTimezoneOffset();
				today = b.getFullYear() + "-" + b.getMonth() + "-" + b.getDate() + "-" + b.getHours();
				if (params.theCityText  !== '' && elem == "") {
					if (a) {
						if ((names[0]).replace(/\+\b/gi,' ') == params.theCityText) {
							tempOffset +=  60 * timezones[0];

							gettimezoneDST = getDST(new Date(), eval(params.customDST));
							offseter = timezones[0] * 60;

							if (gettimezoneDST == 100) {
								tempOffset += 60;

							}
							offseter = tempOffset;
								cityTime(tempOffset,timezones[0],'');
							setMinutesOffset(tempOffset);
						}
					}
				} else
				if (params.theCityText1  !== '' && elem == "1") {
						if ((names[1].replace('+',' ')) == params.theCityText1) {
							tempOffset1 +=  60 * timezones[1];
							gettimezoneDST1 = getDST(new Date(), eval(params.customDST1));
							if (gettimezoneDST1 == 100) {
								tempOffset1 += 60;
							}
								cityTime(tempOffset1,timezones[1],'1');
							setMinutesOffset(tempOffset1);
						}
				} else
				if (params.theCityText2  !== '' && elem == "2") {
						if ((names[2]).replace('+',' ') == params.theCityText2) {
							tempOffset2 +=  60 * timezones[2];
							gettimezoneDST2 = getDST(new Date(), eval(params.customDST2));
							if (gettimezoneDST2 == 100) {
								tempOffset2 += 60;
							}
								cityTime(tempOffset2,timezones[2],'2');
							setMinutesOffset(tempOffset2);
						}
				}
				if (params.theCityText.length >= 13 ) {
					document.getElementById("cityText").style.fontSize = "8px";
				}

			}
			/* timezone text clock */

			function cityTime(thenewOffset,customOffset,elem) {
				var cityTime = new Date();
				cityTime.setHours(cityTime.getHours());
				cityTime.setMinutes(cityTime.getMinutes() + thenewOffset);
				cityTime.setSeconds(cityTime.getSeconds());
				var cityTime_millisecondes = cityTime.getMilliseconds();
				var cityTime_seconds = cityTime.getSeconds();
				var cityTime_minutes = cityTime.getMinutes();
				var cityTime_hours = cityTime.getHours();
				var cityTime_day = cityTime.getDay();
				if (cityTime_day == 0) {
					var f = "Sun"
				} else if (cityTime_day == 1) {
					var f = "Mon"
				} else if (cityTime_day == 2) {
					var f = "Tue"
				} else if (cityTime_day == 3) {
					var f = "Wed"
				} else if (cityTime_day == 4) {
					var f = "Thu"
				} else if (cityTime_day == 5) {
					var f = "Fri"
				} else if (cityTime_day == 6) {
					var f = "Sat"
				}
				// console.log(cityTime_hours)
				if (params.amPm == true) {
					var g = " ";
					if (cityTime_hours >= 12) {
						g = " PM"
					} else {
						g = " AM"
					}
				} else {
					g = ""
				}
				if (params.time24hours == true) {
					g = ""
				} else {
					if (cityTime_hours >= 13) {
						cityTime_hours -= 12
					} else if (cityTime_hours == 0) {
						cityTime_hours = 12
					}
				}
				if (params.trailingZero == true) {
					if (cityTime_hours < 10) {
						cityTime_hours = "0" + cityTime_hours
					}
				}

				if (cityTime_minutes < 10) cityTime_minutes = "0" + cityTime_minutes;

				if (params.showText == true) {
					if (params.showDay == true) {
						f = f;
					} else {
						f ="";
					}
				}


				function updateText(updated){

					if (cityTime_seconds >=  0 && cityTime_seconds <  1) {
						update = document.getElementById("rolexClockCityTime"+elem+"").innerHTML = f + " " + cityTime_hours + ":" + cityTime_minutes + "" + g;
						updateTime(thenewOffset,customOffset,elem);

					} else {
						if (checked === undefined) {
							update = document.getElementById("rolexClockCityTime"+elem+"").innerHTML = f + " " + cityTime_hours + ":" + cityTime_minutes + "" + g;
							var checked = 1;
							updateTime(thenewOffset,customOffset,elem);
						}

					}
				};
				requestAnimFrame(updateText);
			}

			function updateTime(thenewOffset,customOffset,elem) {
				cityTime(thenewOffset,customOffset,elem);
			}
			/* yourtime text clock */
			function yourTime() {
				var a = new Date;
				a.setHours(a.getHours());
				a.setMinutes(a.getMinutes());
				a.setSeconds(a.getSeconds());
				var b = a.getSeconds();
				var c = a.getMinutes();
				var d = a.getHours();
				var e = a.getDay();
				if (e == 0) {
					var f = "Sun"
				} else if (e == 1) {
					var f = "Mon"
				} else if (e == 2) {
					var f = "Tue"
				} else if (e == 3) {
					var f = "Wed"
				} else if (e == 4) {
					var f = "Thu"
				} else if (e == 5) {
					var f = "Fri"
				} else if (e == 6) {
					var f = "Sat"
				}
				if (params.amPm == true) {
					var g = " ";
					if (d >= 12) {
						g = " PM"
					} else {
						g = " AM"
					}
				} else {
					g = ""
				}
				if (params.time24hours == true) {
					g = ""
				} else {
					if (d >= 13) {
						d -= 12
					}
				}
				if (params.trailingZero == true) {
					if (d < 10) {
						d = "0" + d
					}
				}
				if (c < 10) c = "0" + c;

					if (params.showText == true) {
						if (params.showDay == true) {
							f = f;
						} else {
							f ="";
						}
						update = document.getElementById("rolexClockYourTime").innerHTML = f + " " + d + ":" + c + "" + g;
					}
					if (params.upperCase == true) {
						document.getElementById("rolexClockYourTime").style.textTransform = "uppercase"
					}
					requestAnimFrame(yourTime);
			}

			function showCurrentTime() {
				setMinutesOffset(0)
			}

			function updateShownTimeInHTMLComponent() {
				tempString = getCurrentShownTime()
			}
			// cityTime();

			if (params.theCity != '' ) {
				showTimeIn(params.theCity, params.customOffset, "");
			}
			if (params.theCity1 != '') {
				showTimeIn(params.theCity1, params.customOffset1, 1);
			}
			if (params.theCity2 != '') {
				showTimeIn(params.theCity2, params.customOffset2, 2);
			}

			timeTimezon.style.color = params.greencolor;
			timeTimezon1.style.color = params.yellowcolor;
			timeTimezon2.style.color = params.yellowcolor;
			Arrow.style.color = params.yellowcolor;
			Arrow0.style.color = params.greencolor;
			Arrow1.style.color = params.yellowcolor;
			Arrow2.style.color = params.yellowcolor;

			yourtime.style.color = params.yellowcolor;
			// showCurrentTime();
			yourTime();


		}
		startWatchEngine();
	} 
}
/**
 * Method: <buildClock>
 *
 * Description:
 * Configure the watch html part
 *
 * Parameters:
 * clockWidth : clockWidth 			- width of the clock to be set on top the html file
 * clockHeight : clockHeight 		- height of the clock to be set on top the html file
 * bgFileName : 'bg.png' 			- set the of the background file
 * flashname : 'usga_295x100_lake_orion' 	- set the falsh name without .swf (place the file in the img folder)
 * trackingurl : 'http ///www.rolex.com/en/home/?cmpid=dw20126128' 	- set the tracking url
 * theLocalText : 'Your Time' 		- set your time text to be shown on the banner
 * theCityText : ' ' + 'Lake Orion' - set city text to be shown on the banner
 * theCity : 'boston' 				- set name of the city for it's offset
 * amPm: true 						- set custom offset if city doesn't exist in the list
 * customOffset : '' 				- set custom offset if city doesn't exist in the list
 * time24hours : false 				- show time in 24s format with true
 * showText : true 					- hide all text and time with false
 * showTime : false 				- show time without city : your time text with true
 * showDay : true 					- change all text to Uppercase with true
 * upperCase : false 				- change all text to Uppercase with true
 * retinaXcenter : 142 				- change the clock X position
 * retinaYcenter : 50 				- change the clock Y position
 * retinaXscale : 1.1 				- change the clock X scale
 * retinaYscale : 1.1 				- change the clock Y scale
 * greencolor : '#987633' 		- change the text city time color
 * yellowcolor : '#0F3C03' 		- change the text your time color
 * pointPosition : '72px' 			- change the dot right position
 * textRightPosition : '10px' 		- change the text blocks right position
 * textYourtimeTopPosition : '18px' - change the yourtime div top position
 * textTimezoneTopPosition : '54px' - change the timezone div top position
 */
buildClock({
	LANG: 'en',
	clockWidth: clockWidth, /* width of the clock to be set on top the html file */
	clockHeight: clockHeight, /* height of the clock to be set on top the html file */
	bgFileName: 'bg.png', /* set the of the background file */
	flashname: 'formula1_235x203', /* set the falsh name without .swf (place the file in the img folder)*/
	trackingurl: 'http://www.rolex.com/en#/home/?cmpid=dw201301477', /* set the tracking url */
	trackingPixel: '',
	trackUrlH: '117px',
	trackUrlW: '235px',
	trackUrlL: '0px',
	theLocalText: 'Your time', /* set your time text to be shown on the banner */
	theCityText: ' ' + '', /* set city text to be shown on the banner */
	theCity: 'Los+Angeles', /* set name of the city for it's offset*/
	theCityText1: ' ' + '', /* set city text to be shown on the banner */
	theCity1: '', /* set name of the city for it's offset*/
	theCityText2: ' ' + '', /* set city text to be shown on the banner */
	theCity2: '', /* set name of the city for it's offset*/
	trailingZero: true,
	amPm: false, /* set custom offset if city doesn't exist in the list */
	customOffset: "", /* set custom offset if city doesn't exist in the list */
	customOffset1: "",
	customOffset2: "",
	customDST:"",
	customDST1:"",
	customDST2:"",
	time24hours: true, /* show time in 24 hours format with true */
	showText: true, /* hide all text and time with false */
	showTime: false, /* show time without city / your time text with true */
	showDay: false, /* change all text to Uppercase with true */
	upperCase: false, /* change all text to Uppercase with true */
	retinaXcenter: 139, /* change the clock X position */
	retinaYcenter: 42, /* change the clock Y position */
	retinaXscale: .86, /* change the clock X scale */
	retinaYscale: .86, /* change the clock Y scale */
	greencolor: '#027D57', /* change the text city time color */
	yellowcolor: '#ab8d51', /* change the text your time color */
	pointPosition: '78px', /* change the dot right position */
	point2Position: '78px', /* change the dot right position */
	textRightPosition: '0px', /* change the text blocks right position */
	textYourTimeRightPosition:'0px', /* change the text blocks right position */
	trackUrlNewArea: false
});
function showCurrentTime() {
		setMinutesOffset(0)
	}

	function changeClock (id) {
		var yourtime = document.getElementById("yourTime");
		var timeTimezon = document.getElementById("timezone");
		var Arrow = document.getElementById("arrow");
		var Arrow0 = document.getElementById("arrow0");
		var greencolor= '#027D57'; /* change the text city time color */
		var yellowcolor= '#ab8d51';
		if (id === 'race') {
			timeTimezon.style.color = greencolor;
			yourtime.style.color = yellowcolor;
			Arrow.style.display = "none";
			Arrow0.style.color = greencolor;
			Arrow0.style.display = "block";
			setMinutesOffset(offseter)
			// showTimeIn(params.theCity,params.customOffset,"",params.customDST);
		} else if (id === 'local') {
			timeTimezon.style.color = yellowcolor;
			yourtime.style.color = greencolor;
			Arrow.style.color = greencolor;
			Arrow.style.display = "block";
			Arrow0.style.display = "none";
			showCurrentTime();
		}
	}





